﻿@page "/split"
@inject IStringLocalizer<Splits> Localizer

<h3>@Localizer["SplitsTitle"]</h3>

<div>
    <DemoBlock Title="@Localizer["SplitsNormalTitle"]"
               Introduction="@Localizer["SplitsNormalIntro"]"
               Name="Normal">
        <div class="border split-demo split-demo-horizontal">
            <Split>
                <FirstPaneTemplate>
                    <div class="d-flex justify-content-center align-items-center h-100"></div>
                </FirstPaneTemplate>
                <SecondPaneTemplate>
                    <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel2"]</div>
                </SecondPaneTemplate>
            </Split>
        </div>
    </DemoBlock>

    <DemoBlock Title="@Localizer["SplitsPercentTitle"]"
               Introduction="@Localizer["SplitsPercentIntro"]"
               Name="Basis">
        <div class="border split-demo split-demo-horizontal">
            <Split Basis="40%">
                <FirstPaneTemplate>
                    <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel1"]</div>
                </FirstPaneTemplate>
                <SecondPaneTemplate>
                    <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel2"]</div>
                </SecondPaneTemplate>
            </Split>
        </div>
    </DemoBlock>

    <DemoBlock Title="@Localizer["SplitsVerticalTitle"]"
               Introduction="@Localizer["SplitsVerticalIntro"]"
               Name="IsVertical">
        <div class="border split-demo">
            <Split IsVertical="true">
                <FirstPaneTemplate>
                    <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel3"]</div>
                </FirstPaneTemplate>
                <SecondPaneTemplate>
                    <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel4"]</div>
                </SecondPaneTemplate>
            </Split>
        </div>
    </DemoBlock>

    <DemoBlock Title="@Localizer["SplitsNestedTitle"]"
               Introduction="@Localizer["SplitsNestedIntro"]"
               Name="Nested">
        <div class="border split-demo">
            <Split>
                <FirstPaneTemplate>
                    <Split IsVertical="true">
                        <FirstPaneTemplate>
                            <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel5"]</div>
                        </FirstPaneTemplate>
                        <SecondPaneTemplate>
                            <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel6"]</div>
                        </SecondPaneTemplate>
                    </Split>
                </FirstPaneTemplate>
                <SecondPaneTemplate>
                    <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel7"]</div>
                </SecondPaneTemplate>
            </Split>
        </div>
    </DemoBlock>
</div>

<AttributeTable Items="@GetAttributes()" />
